<template>
  <el-dialog
    title="修改人员"
    v-model="dialogVisible"
    width="80%"
    height="50vh"
    :destroy-on-close="true"
    draggable
    :close-on-click-modal="false"
    @close="$emit('update:visible', false)"
  >
    <div class="t-box">
      <div class="table-box">
        <ProTable
          ref="leftDataGridRef"
          :request-auto="false"
          :search-col="2"
          :init-param="leftDataGrid.initParam"
          :columns="leftDataGrid.columns"
          :request-api="getLeftGridData"
          :data-callback="tableDataCallback"
        >
          <template #tableHeader>
            <GlobalButton :button-list="leftDataGrid.headButtonList"></GlobalButton>
          </template>

          <template #operation="{ row }">
            <GlobalButton :button-list="leftDataGrid.rowButtonList" :row-params="row"></GlobalButton>
          </template>
        </ProTable>
      </div>
      <div class="table-box">
        <ProTable
          ref="rightDataGridRef"
          :search-col="2"
          :request-auto="false"
          :init-param="rightDataGrid.initParam"
          :columns="rightDataGrid.columns"
          :data-callback="tableDataCallback"
          :request-api="userRolePageUserByRole"
        >
          <template #tableHeader>
            <GlobalButton :button-list="rightDataGrid.headButtonList"></GlobalButton>
          </template>

          <template #operation="{ row }">
            <GlobalButton :button-list="rightDataGrid.rowButtonList" :row-params="row"></GlobalButton>
          </template>
        </ProTable>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { useDataGrid } from './hooks/use-dataGrid';
import { getUserList, userRolePageUserByRole } from '$api/auth/user';
import { ProTableInstance } from '@/components/ProTable/interface';

interface UpdateRoleUserProps {
  visible: boolean;
  roleId: number;
}
const props = withDefaults(defineProps<UpdateRoleUserProps>(), {
  visible: false,
  roleId: null
});

const leftDataGridRef = ref<ProTableInstance>();
const rightDataGridRef = ref<ProTableInstance>();

const $emit = defineEmits(['update:visible']);

let dialogVisible = ref(props.visible);

watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
    const roleId = props.roleId;
    if (dialogVisible.value) {
      console.log(props.roleId, 'props.roleId');

      Object.assign(leftDataGrid.initParam, {
        roleId: roleId,
        neRoleId: roleId
      });
      rightDataGrid.initParam.roleId = roleId;

      nextTick(() => {
        refresh();
      });
    }
  }
);

watch(
  () => dialogVisible.value,
  val => {
    $emit('update:visible', val);
  }
);

const getLeftGridData = async params => {
  return new Promise(resolve => {
    getUserList(params).then(data => {
      resolve(data);
    });
  });
};

const refresh = () => {
  leftDataGridRef.value?.getTableList();
  rightDataGridRef.value?.getTableList();
};

const { dataGrid: leftDataGrid, tableDataCallback } = useDataGrid('left', leftDataGridRef, refresh);
const { dataGrid: rightDataGrid } = useDataGrid('right', rightDataGridRef, refresh);
</script>

<style lang="scss" scoped>
.t-box {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
  height: 400px;
  > div:nth-of-type(1) {
    margin-right: 10px;
  }
  > div:nth-of-type(2) {
    margin-left: 10px;
  }
  > div {
    width: 30% !important;
    height: 100%;
  }
}
</style>
